<template>
    <transition appear name="side_anime">
        <div>
            <div class="back">
                <el-button type="success" size="mini" @click="back">返回</el-button>
            </div>

            <h1>可用药物列表</h1>

            <!-- 查询 -->
            <div class="search">  
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">

                <el-form-item>
                <el-input v-model="searchForm.medicineName" placeholder="药物名" clearable></el-input>
                </el-form-item>

                <el-form-item>
                <el-select v-model="searchForm.medicalType" placeholder="药物类型" clearable>
                    <el-option label="西药" value="西药"></el-option>
                    <el-option label="中药" value="中药"></el-option>
                    <el-option label="检查项目" value="检查项目"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryMediList">查询</el-button>
                </el-form-item>
            </el-form>
            </div>

            <!-- 添加到药物清单、药物清单查看按钮 -->
            <div class="addList">
                <el-button
                    type="success"
                    icon="el-icon-plus"
                    size="small"
                    @click="addToDrugList()">添加到药物清单
                </el-button>
                <el-button
                    type="success"
                    icon="el-icon-tickets"
                    size="small"
                    @click="drugListVisible = true">药物清单
                </el-button>
            </div>

            <!-- 可用药物列表 -->
            <el-table
                ref="multipleTable"
                :data="availableMedicineList"
                tooltip-effect="dark"
                :row-key="getRowKey"
                style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" width="55"  :reserve-selection="true" >
                </el-table-column>

                <el-table-column prop="id" label="药物ID" width="120">
                </el-table-column>

                <el-table-column prop="medicineName" label="药物名" width="150">
                </el-table-column>

                <el-table-column prop="medicalType" label="药物类型" width="120">
                </el-table-column>

                <el-table-column prop="medicinePrice" label="药物单价" width="120">
                </el-table-column>

                <el-table-column prop="medicineOriginalPrice" label="药物原价" width="120">
                </el-table-column>

                <el-table-column prop="medicineStock" label="药物库存" width="120">
                </el-table-column>

                <el-table-column prop="specifications" label="药物规格" width="120">
                </el-table-column>
            </el-table>

            <div style="margin-top: 20px">
                <el-button @click="toggleSelection()">取消选择</el-button>
            </div>

            <!-- 分页 -->
            <el-pagination
                class="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                v-model:currentPage="currentPage"
                v-model:pageSize="pageSize"
                :page-size="8"
                layout="total, prev, pager, next"
                :total=total>
            </el-pagination>
        </div>
    </transition>
    

    
    <!-- 病人药物清单 -->
    <el-dialog
        title="药物清单"
        v-model="drugListVisible"
        width="80%">
        <div>
            <el-table
                :data="drugList"
                style="width: 100%"
                :header-cell-style="{background:'#909399',color:'#fff'}">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column  label="药物ID" width="80">
                    <template #default="scope">
                        <span>{{scope.row.id}}</span>
                    </template> 
                </el-table-column>

                <el-table-column prop="medicineName" label="药物名" width="120">
                </el-table-column>

                <el-table-column prop="medicalType" label="药物类型" width="120">
                </el-table-column>

                <el-table-column prop="medicineNumber" label="药物数量" width="120">
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.medicineNumber"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="medicinePrice" label="药物单价" width="120">
                </el-table-column>

                <el-table-column prop="specifications" label="药物规格" width="120">
                </el-table-column>

                <el-table-column prop="usaged" label="用法" width="180">
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.usaged"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="advice" label="医嘱" width="180">
                    <template #default="scope">
                        <el-input v-if="scope.row.edit" v-model="scope.row.advice"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                    <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="mini"
                        @click="editData(scope.row)">
                    </el-button>
                    <!-- <el-button
                        type="success"
                        icon="el-icon-check"
                        size="mini"
                        @click="saveData(scope.$index, scope.row)">
                    </el-button> -->
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        @click="removeData(scope.$index, scope.row)">
                    </el-button>
                    </template>
                </el-table-column>

                <!-- <el-table-column :formatter="stateFormat" prop="medicineStatus" label="药物状态" 
                width="120">
                </el-table-column> -->
            </el-table>
        </div>
        <div class="btn">
            <el-button @click="drugListVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitDrugList">提 交</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {getMedicineList} from '../../api/api'
import {submitPrescription} from '../../api/api'

export default{
    inject:['reload'],
    data() {
        return {
            availableMedicineList:[],
            currentPage:1,
            total:0,
            pageSize:8,
            drugListVisible:false,
            drugList:[],
            numbers:'',
            searchForm:{
                medicineName: '',
                medicalType: ''
            }
        }
    },

    mounted() {
        this.getAvailableMedicine(1);
    },

    methods: {
        back() {
            this.$router.push("/homeview/patientList")
        },

        //当每页数据条数发生改变的时候触发
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`)
            this.currentPage = 1;
            this.pageSize = val;
            this.getMedicineList();
        },
        //当页码发生改变的时候触发
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`)
            this.currentPage = val;
            this.getAvailableMedicine(val);
        },

        //获取可用药物列表
        getAvailableMedicine(page){
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            console.log(token);
            let data = {
                'page':page,
                'size':8,
                medicineName:this.searchForm.medicineName,
                medicalType:this.searchForm.medicalType
            }
            let header = {
                'satoken':token
            }
            getMedicineList(data,header).then(response => {
                console.log('请求成功',response)
                if (response.ret == '0'){
                    this.availableMedicineList = response.list
                    this.total = response.total
                }else {
                    this.$message({
                        message:'获取失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })
        },

        getRowKey(row) {
            return row.id;
        },

        

        //条件查询可用药物列表
        queryMediList() {
            // this.$options.methods.getAvailableMedicine(1)
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            console.log(token)
            let data = {
                'page':this.currentPage,
                'size':8,
                medicineName:this.searchForm.medicineName,
                medicalType:this.searchForm.medicalType
            }
            let header = {
                'satoken':token
            }
            console.log(data)
            getMedicineList(data,header).then(response => {
                console.log('请求成功',response)
                if (response.ret == '0'){
                    this.availableMedicineList = response.list
                    this.total = response.total
                }else {
                    this.$message({
                        message:'查询失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })
        },

        //取消选择
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(this.multipleSelection)
        },

        //添加药物到药物清单
        addToDrugList() {
            this.drugList = this.multipleSelection
            console.log(this.multipleSelection)
            console.log(this.drugList)
            if(!this.multipleSelection){
                this.$message({
                    message:'您当前未选择任何药物',
                    type: 'warning'
                })
            }else {
                this.drugList = this.multipleSelection
                this.$message({
                    message:'添加成功',
                    type: 'success'
                })
                this.toCheckOut = this.drugList.length
            }
        },

        //修改
        editData(row) {
            row.edit = true;
        },

        // saveData(index,row) {
        //     row.medicineNumber = row.medicineNumber,
        //     row.usaged = row.usaged,
        //     row.advice = row.advice,
        //     console.log(this.drugList.medicineNumber)
        //     console.log(this.drugList.usaged)
        //     console.log(this.drugList.advice)
        //     console.log(this.drugList)
        //     row.edit = false
        // },

        //移除
        removeData(index,row) {
            console.log(index,row)
            this.drugList.splice(index, 1)
            this.$message({
              message:'移除成功',
              type: 'success'
            })
            this.$refs.multipleTable.toggleRowSelection(row) //移除后取消列表的选择状态
        },

        //提交药物清单
        submitDrugList(){
            let patientId = this.$route.params.id;
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            let mediList = [];
            this.drugList.forEach(item => {
                mediList.push({
                    medicineId:item.id,
                    medicineName:item.medicineName,
                    medicineType:item.medicalType,
                    medicineNumber:item.medicineNumber,
                    medicinePrice:item.medicinePrice,
                    specifications:item.specifications,
                    usaged:item.usaged,
                    advice:item.advice
                });
            })
            let data = {
                'id':patientId,
                'list':mediList
                // 'list':list
            }
            console.log(mediList)
            // console.log(data)
            submitPrescription(data,header).then(response => {
                console.log('请求成功',response)
                if (response.ret == '0'){
                    this.drugListVisible = false
                    this.$message({
                        message:'提交成功',
                        type: 'success',
                        showClose:true
                    })
                    this.reload()
                }else {
                    this.$message({
                        message:'提交失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.back {
  text-align: left;
  margin-bottom: 30px;
}
.addList {
  text-align: left;
  margin-bottom: 30px;
}
.btn {
    margin-top: 20px;
}
.search {
    text-align: left;
    margin:20px 0;
}
.pagination {
    margin-top: 30px;
}
/* h1 {
    color: #67C23A;
} */
</style>

